<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/login.css">
    <script src="/static/js/jquery-3.2.1.js"></script>

</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-5">

                <form method="post" action="" class="post_form">
                      <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" id="username" name="username" placeholder="username">
                      </div>

                      <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                      </div>

                    <div class="form-group">
                        <label for="valid_code">验证码</label>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="text" class="form-control" id="valid_code" name="valid_code" placeholder="valid_code">
                            </div>

                            <div class="col-md-6">

                                <img src="/captcha/" width="213" height="35" class="valid_img"><a class="refersh">刷新</a>
                            </div>

                        </div>
                      </div>

                        <p class="error company-tips" id="error_tips"></p>

                        <input type="button" value="提交" id="ajax_submit_btn">

                        <input type="reset" style="display: none" id="reset_btn">
                        <input hidden value="{{ path }}" id="path">

                        {% csrf_token %}
                </form>

            </div>
        </div>
    </div>

</body>

    <script src="/static/js/login.js"></script>
    <script>
        $('#ajax_submit_btn').click(function () {

            $.ajax({
               url:'/login/',
               type:"POST",
               data: {'username':$('#username').val(), 'password': $("#password").val(),
                   'valid_code':$('#valid_code').val(), 'path':$('#path').val(),
                   "csrfmiddlewaretoken":$('[name="csrfmiddlewaretoken"]').val()
               },

               success:function (data) {
                   if(data.status == 'success'){
                       {#$('#ajax_submit_btn')[0].reset();#}
                       {#$('#reset_btn').trigger('click');#}

                       window.location.href= data.path;
                   }
                   else if(data.status == 'fail'){
                       $('#error_tips').text(data.msg);
                       $('#reset_btn').trigger('click');
                   }
               }
           })
            
        })
    </script>
</html>
